<template>
	<view id="index">
		<!-- 背景颜色 -->
		<view class="top-background"></view>
		<view class="pd-box">
			<!-- 头部 -->
			<view class="header-top-xx">
				<!-- <view class="header-address" @tap="selectAddress">
					<icon class="icon-address"></icon>
					<text>{{address}}</text>
					<icon class="icon-select"></icon>
				</view> -->
				<view class="header-search">
					<LhSamllSearch :disabled="true" @search="search"></LhSamllSearch>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="i-banner">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item v-for="(item,index) in banner" :key="item.id">
						<image class="swiper-item" :src="IMG_URL+item.img" mode="aspectFill" @click="bindWebView(item.url)"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 4个说明 -->
			<view class="explain">
				<view class="explain-item">
					<icon class="icon-explain-1"></icon>
					<text>超低咪粉价</text>
				</view>
				<view class="explain-item">
					<icon class="icon-explain-2"></icon>
					<text>品质把控</text>
				</view>
				<view class="explain-item">
					<icon class="icon-explain-3"></icon>
					<text>品牌支持</text>
				</view>
				<view class="explain-item">
					<icon class="icon-explain-4"></icon>
					<text>安心领养</text>
				</view>
			</view>
			<!-- 分类 -->
			<view class="sort">
				<view class="sort-item" v-for="(item,index) in cate" :key="item.id" @click="classification(index)">
					<image class="sort-img" :src="IMG_URL+item.img" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 空白 -->
		<view class="blank-box"></view>
		<!-- 热门商品 -->
		<view class="pd-box hot-shop" v-if="hotShop.length>=1">
			<LhSamllTitle :title="'热门商品'" @more="more(1)"></LhSamllTitle>
			<view class="hot-shop-list">
				<view class="hot-shop-item" v-for="(item,index) in hotShop" :key="item.id" @click="bindDetail(item.id)">
					<view class="hot-box">
						<icon class="icon-hot"></icon>
						<text>热门</text>
					</view>
					<view class="hot-shop-i-img">
						<img :src="IMG_URL+item.img" alt="" mode="aspectFill">
					</view>
					<view class="hot-shop-i-content">{{item.name}}</view>
					<view class="hot-shop-i-commet">{{item.comment}}条评论</view>
					<view class="hot-shop-i-price">
						<view class="membership-price">咪粉价：<text>¥</text>{{item.sku_vprice}}</view>
						<view><text>¥</text>{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空白 -->
		<view class="blank-box"></view>
		<!-- 销售排行 -->
		<view class="pd-box sales-shop" v-if="salesShop.length>=1">
			<LhSamllTitle :title="'销售排行'" @more="more(2)"></LhSamllTitle>
			<view class="sales-shop-list">
				<view class="sales-shop-item" v-for="(item,index) in salesShop" :key="item.id" @click="bindDetail(item.id)">
					<view class="sales-box">
						<text>TOP-{{index+1}}</text>
					</view>
					<view class="sales-shop-i-img">
						<img :src="IMG_URL+item.img" alt="" mode="aspectFill">
					</view>
					<view class="sales-shop-i-content">{{item.name}}</view>
					<view class="sales-shop-i-commet">已售{{item.sold}}件</view>
					<view class="sales-shop-i-price">
						<view class="membership-price">咪粉价：<text>¥</text>{{item.sku_vprice}}</view>
						<view><text>¥</text>{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空白 -->
		<view class="blank-box"></view>
		<!-- 为您推荐 -->
		<view class="pd-box recommend-shop" v-if="recommendShop.length>=1">
			<LhSamllTitle :title="'为您推荐'" @more="more(3)"></LhSamllTitle>
			<view class="recommend-shop-list">
				<view class="recommend-shop-item" v-for="(item,index) in recommendShop" :key="item.id" @click="bindDetail(item.id)">
					<view class="recommend-shop-i-img">
						<img :src="IMG_URL+item.img" alt="" mode="aspectFill">
					</view>
					<view class="recommend-shop-i-content">{{item.name}}</view>
					<view class="recommend-shop-i-price">
						<view class="membership-price">咪粉价：<text>¥</text>{{item.sku_vprice}}</view>
						<view><text>¥</text>{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import LhSamllTitle from '@/wxcomponents/lh-small-title/lh-small-title.vue'
	import LhSamllSearch from '@/wxcomponents/lh-small-search/lh-small-search.vue'
	import {
		nabercatBanner,
		nabercatHot,
		nabercatSales,
		nabercatRec,
		nabercatHomecate
	} from '@/api/index.js'
	export default {
		components: {
			LhSamllTitle,
			LhSamllSearch
		},
		data() {
			return {
				address: '请选择地址',
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				banner: [], //轮播图
				hotShop: [], //热门商品
				salesShop: [], //商品排行
				cate: [], //分类
				recommendShop: [], //为您推荐
			}
		},
		methods: {
			// 跳转webview
			bindWebView:function(url){
				console.log(url)
				if(url){
					uni.navigateTo({
						url:`/pages/webview/index?url=${url}`
					})
				}
			},
			// 轮播图列表
			nabercatBanner: function() {
				nabercatBanner().then(res => {
					this.banner = res
				})
			},

			// 热门商品
			nabercatHot: function() {
				nabercatHot().then(res => {
					this.hotShop = res
				})
			},

			// 商品排行
			nabercatSales: function() {
				nabercatSales().then(res => {
					this.salesShop = res
				})
			},

			// 为您推荐
			nabercatRec: function() {
				nabercatRec().then(res => {
					this.recommendShop = res
				})
			},

			// 分类
			nabercatHomecate: function() {
				nabercatHomecate().then(res => {
					this.cate = res
				})
			},

			// 查看更多
			more: function(e) {
				uni.navigateTo({
					url: `/pageA/cat-food/cat-food?status=${e}`
				})
			},

			// 跳转到详情页
			bindDetail: function(id) {
				uni.navigateTo({
					url: `/pageA/goodDetail/goodDetail?id=${id}`
				})
			},

			// 搜索
			search: function() {
				uni.navigateTo({
					url: `/pageA/search/search`
				})
			},

			// 跳转到分类
			classification: function(e) {
				uni.navigateTo({
					url: `/pageA/jump-sort/jump-sort?scrollIntoId=${e}`
				})
			},

			// 选择地址
			selectAddress: function() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: () => {
									uni.chooseLocation({
										success: (res) => {
											this.address = res.name
										},
									})
								},
								fail: () => {
									uni.showModal({
										title: '提示',
										content: '检测到您没打开收货地址授权，是否去设置打开？',
										success: (res)=> {
											if (res.confirm) {
												uni.openSetting({
													success: () => {
														uni.chooseLocation({
															success: (res) => {
																this.address = res.name
															},
														})
													}
												});
											}
										}
									})
								}
							})
						} else {
							uni.chooseLocation({
								success: (res) => {
									this.address = res.name
								},
							})
						}
					}
				})
			}
		},
		onLoad(options) {
			this.nabercatBanner(); // 轮播图列表
			this.nabercatHot(); //热门商品
			this.nabercatSales(); //商品排行
			this.nabercatRec(); //为您推荐
			this.nabercatHomecate(); //分类
		},
		onShareAppMessage(){
			return {
				title:'NABERCAT'
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin chaoC() {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 4rpx;
		line-height: 33rpx;
		height: 64rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	#index {
		position: relative;

		.top-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 255rpx;
			background: #FFC102;
			border-radius: 0 0 50% 50%;
			z-index: -99;
		}

		.header-top-xx {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.header-address {
				display: flex;
				align-items: center;
				color: #FFFFFF;

				&>text {
					width: 140rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.icon-address {
					width: 46rpx;
					height: 46rpx;
					background: url(../../static/images/address-index.png) no-repeat;
					background-size: cover;
					margin-right: 13rpx;
				}

				.icon-select {
					width: 18rpx;
					height: 12rpx;
					background: url(../../static/images/xiala.png) no-repeat;
					background-size: cover;
					margin-left: 4rpx;
				}
			}

			.header-search {
				height: 60rpx;
				width: 376rpx;
				flex: 1;
				// margin-left: 24rpx;
			}
		}

		.i-banner {
			width: 100%;
			height: 309rpx;
			margin-bottom: 45rpx;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}

		.explain {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 22rpx;
			color: #999999;
			margin-bottom: 25rpx;

			.explain-item {
				display: flex;
				align-items: center;

				&>icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}

				.icon-explain-1 {
					background: url(../../static/images/explain1.png);
					background-size: cover;
				}

				.icon-explain-2 {
					background: url(../../static/images/explain2.png);
					background-size: cover;
				}

				.icon-explain-3 {
					background: url(../../static/images/explain3.png);
					background-size: cover;
				}

				.icon-explain-4 {
					background: url(../../static/images/explain4.png);
					background-size: cover;
				}
			}
		}

		.sort {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			color: #666666;
			font-size: 24rpx;

			.sort-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 106rpx;
				margin-bottom: 42rpx;

				&:nth-of-type(4n) {
					margin-right: 0;
				}

				.sort-img {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
			}
		}

		.hot-shop-list {
			display: flex;
			// justify-content: space-between;

			.hot-shop-item {
				width: 215rpx;
				position: relative;
				margin-right: 22rpx;
				&:nth-of-type(3n){
					margin-right: 0;
				}

				.hot-shop-i-img {
					width: 100%;
					height: 264rpx;
					border: 1px solid #F1F1F1;
					margin-bottom: 12rpx;
					padding: 28rpx 7rpx 16rpx 4rpx;
					box-sizing: border-box;

					&>image {
						width: 100%;
						height: 100%;
					}
				}

				.hot-shop-i-content {
					@include chaoC;
				}

				.hot-shop-i-commet {
					color: #CCCCCC;
					font-size: 20rpx;
				}

				.hot-shop-i-price {
					color: #F6240C;
					font-size: 32rpx;
					font-weight: 500;
					// display: flex;
					// align-items: center;
					text {
						font-size: 24rpx;
					}
				}

				.hot-box {
					position: absolute;
					top: 0;
					left: 0;
					width: 87rpx;
					height: 32rpx;
					background: #F52912;
					border-radius: 16rpx 0px 16rpx 0px;
					padding: 0 8rpx;
					box-sizing: border-box;
					color: #FFFFFF;
					font-size: 22rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.icon-hot {
						width: 20rpx;
						height: 24rpx;
						background: url(../../static/images/icon-hot.png) no-repeat;
						background-size: cover;
					}
				}
			}
		}

		.sales-shop-list {
			display: flex;
			// justify-content: space-between;

			.sales-shop-item {
				width: 215rpx;
				position: relative;
				margin-right: 22rpx;
				&:nth-of-type(3n){
					margin-right: 0;
				}

				.sales-shop-i-img {
					width: 100%;
					height: 264rpx;
					border: 1px solid #F1F1F1;
					margin-bottom: 12rpx;
					padding: 28rpx 7rpx 16rpx 4rpx;
					box-sizing: border-box;

					&>image {
						width: 100%;
						height: 100%;
					}
				}

				.sales-shop-i-content {
					@include chaoC;
				}

				.sales-shop-i-commet {
					// color: #FFC102;
					color: #CCCCCC;
					font-size: 20rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
				}

				.sales-shop-i-price {
					color: #F6240C;
					font-size: 32rpx;
					font-weight: 600;
					text {
						font-size: 24rpx;
					}
				}

				.sales-box {
					position: absolute;
					top: 0;
					left: 0;
					width: 87rpx;
					height: 32rpx;
					background: #362D12;
					border-radius: 16rpx 0px 16rpx 0px;
					color: #F9DEB6;
					font-size: 20rpx;
					text-align: center;
					line-height: 32rpx;
				}
			}
		}

		.recommend-shop-list {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;

			.recommend-shop-item {
				width: 215rpx;
				position: relative;
				margin-bottom: 24rpx;
				margin-right: 22rpx;
				&:nth-of-type(3n){
					margin-right: 0;
				}

				.recommend-shop-i-img {
					width: 100%;
					height: 264rpx;
					border: 1px solid #F1F1F1;
					margin-bottom: 12rpx;
					padding: 28rpx 7rpx 16rpx 4rpx;
					box-sizing: border-box;

					&>image {
						width: 100%;
						height: 100%;
					}
				}

				.recommend-shop-i-content {
					@include chaoC;
				}

				.recommend-shop-i-price {
					color: #F6240C;
					font-size: 32rpx;
					font-weight: 600;

					&>text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
	.membership-price{
		font-size: 20rpx;
		font-weight: 600;
		color: #FFC102;
	}

	.pd-box {
		padding: 16rpx 32rpx 18rpx;
	}

	.blank-box {
		height: 20rpx;
		width: 100%;
		background: #F9F9F9;
	}
</style>
